<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="border:1px solid #ccc;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	context.fillText('hellow word!',40,40);



	//画一个基线
	context.textBaseline='bottom';  //这里修改线的位置，可以top，hanging，middl，线的形状大小不改变
	context.moveTo(0,100); //起点坐标
	context.lineTo(250,100);
   context.stroke
   //
	context.font = '30px Times New Roman';     //字体 30px前可以加bold（加粗），lighter（变细），italic（斜体），oblique
	context.fillText('hellow word!',40,100);
	//添加横向线性渐变色
	var g = context.createLinearGradient(0,0,200,0);
	g.addColorStop(0,'magenta');
	g.addColorStop(0.5,'blue');
	g.addColorStop(1,'red');
	context.fillStyle = g;
	context.fillText("Big Smile!",40,150)





//镂空字体
	context.strokeStyle = g;
	context.strokeText("Big Smile!!",40,200)

</script>